<!--
 * @Description: 用户根据旧密码修改密码
 * @Author: Boide
 * @Date: 2021-09-03 15:52:22
 * @LastEditors: guiyi@hongyi.tech
 * @LastEditTime: 2021-09-03 16:44:19
-->
<template>
	<el-card class="box-card">
		<el-form ref="passwdModel" :model="passwdModel" :rules="passwdRules" label-width="80px">
			<el-form-item label="旧密码" prop="oldPassword">
				<el-input type="password" v-model="passwdModel.oldPassword" placeholder="请输入旧密码" maxlength="20" />
			</el-form-item>
			<el-form-item label="新密码" prop="newPassword">
				<el-input type="password" v-model="passwdModel.newPassword" placeholder="请输入新密码" maxlength="20" />
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmPassword">
				<el-input type="password" v-model="passwdModel.confirmPassword" placeholder="请输入确认密码" maxlength="20" />
			</el-form-item>
			<el-form-item label=" ">
				<el-button :loading="submitPassLoading" type="primary" @click="submitPassForm">确 定</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import { userModifySelfPassword } from '@/api/system/user'
export default {
  data () {
    return {
      // 修改密码
      submitPassLoading: false,
      passwdModel: {},
      passwdRules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: '新密码长度必须介于 6 和 20 之间', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: '确认密码长度必须介于 6 和 20 之间', trigger: 'blur' },
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.passwdModel.newPassword !== value) {
                callback(new Error('两次密码输入不一致'))
              }
              callback()
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 提交修改得密码
    submitPassForm(){
      this.submitPassLoading = true
      this.$refs["passwdModel"].validate(async valid => {
        if (valid) {
          try {
            await userModifySelfPassword(this.passwdModel)
            this.$message.success('修改成功')
            this.submitPassLoading = false
            await this.$store.dispatch('user/logout')
            this.$router.push(`/login`)
          } catch (error) {
            this.submitPassLoading = false
          }
        } else {
          this.submitPassLoading = false
        }
      })
    },
    // 密码重置
    resetPass () {
      this.passwdModel = {}
      this.resetForm("passwdModel")
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
